<template>
  <div class="containerDiv">
    <el-button
      type="primary"
      @click="addChild(0, 0)"
      style="
        width: 108px;
        height: 40px;
        padding: 3px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
      "
      ><i class="el-icon-add"></i>添加设备</el-button
    >
    <div class="tableDiv tableScrollbar">
      <el-table
        :data="treeData"
        style="width: 100%; right: -2px"
        class="customer-table"
        row-key="device_id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="ip" label="地址"> </el-table-column>
        <el-table-column prop="type" :formatter="formatType" label="类型">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="addChild(scope.row.type, scope.row.device_id)"
              >添加下级</el-button
            >
            <el-button type="primary" @click="deleteDevice(scope.row.device_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="添加设备" :visible.sync="dialogVisible" width="25%">
      <el-form :model="form">
        <el-form-item label="名称：" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型：" :label-width="formLabelWidth">
          <el-select v-model="form.type" style="width: 100%">
            <el-option label="组织" value="0"></el-option>
            <el-option label="设备" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址：" :label-width="formLabelWidth">
          <el-input
            v-model="form.ip"
            autocomplete="off"
            placeholder="请输入地址"
            :disabled="form.type == '0'"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="height: 10px">
        <el-button class="dialogButton" @click="submitAddChild()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [],
      device_data: [],
      tableData: [],
      statusTimer: '',
      updateThumbnailTimer: '',
      showFlvPlayDiv: false,
      flvPlayer: null,
      dialogVisible: false,
      parentId: 0,
      form: {
        name: '',
        type: '0',
        ip: '',
      },
      formLabelWidth: '60px',
    }
  },
  created() {
    this.getDevices()
  },
  computed: {},
  mounted() {},
  methods: {
    formatType(row, column) {
      if (row.type == 0) {
        return '组织'
      }
      return '设备'
    },
    async getDevices() {
      const { data: res } = await this.$http.get('query_devices', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.treeData = res.data
      }
    },
    addChild(type, device_id) {
      if (type == 1) {
        this.$message.error('设备节点不能添加下级')
        return
      }

      this.form.name = ''
      this.form.type = '0'
      this.form.ip = ''

      this.parentId = device_id
      this.dialogVisible = true
    },
    async submitAddChild() {
      if (this.form.name == '') {
        this.$message.error('请输入名称')
        return
      }
      if (this.form.type == '') {
        this.$message.error('请选择类型')
        return
      }
      if (this.form.type == '1' && this.form.ip == '') {
        this.$message.error('请输入地址')
        return
      }
      const { data: res } = await this.$http.post(
        'create_device',
        {
          name: this.form.name,
          ip: this.form.ip,
          type: this.form.type,
          parent: this.parentId,
        },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code !== '1000') {
        this.$message.error('添加设备失败')
      } else {
        this.$message.success('添加设备成功')
        this.getDevices()
      }
      this.dialogVisible = false
    },
    async deleteDevice(device_id) {
      const { data: res } = await this.$http.delete(
        'delete_device',
        { data: { device_id: device_id } },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code == '1009') {
        this.$message.error('无效的组织或设备')
      } else if (res.code == '1010') {
        this.$message.error('该组织下存在子节点，无法删除')
      } else if (res.code == '1011') {
        this.$message.error('该设备正在观看中，无法删除')
      } else {
        this.$message.success('删除成功')
        this.getDevices()
      }
    },
  },
}
</script>
<style lang="less" scoped>
.containerDiv {
  display: flex;
  height: 100%;
  background: #201f1f;
  flex-direction: column;
}
.bodyHeader {
  display: flex;
  min-height: 68px;
  max-height: 68px;
  // line-height: 60px;
  align-items: center;
  justify-content: space-between;
}
.tableDiv {
  width: calc(100% - 40px);
  height: 100%;
  overflow: auto;
  margin-right: 1px;
  margin-bottom: 10px;
  margin-left: 18px;
  margin-right: 18px;
}
.tableScrollbar::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
.tableScrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #151414;
}
.tableScrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #201f1f;
}
/deep/ .el-button {
  width: 80px;
  height: 30px;
  color: #999999;
  font-size: 12px;
  background: #1a1919;
  border: 1px solid #404040;
  border-radius: 3px;
  padding-top: 8px;
  padding-left: 18px;
}
/deep/ .el-button--primary:focus,
/deep/ .el-button--primary:hover {
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
}
/deep/ .el-table__header tr,
/deep/ .el-table__header th {
  //此处设置表头样式
  padding: 0;
  height: 50px;
  background: #151414;
  font-size: 14px;
  color: #999999;
  text-align: center;
}
/deep/ .el-table__body tr,
/deep/ .el-table__body td {
  //单元格样式
  padding: 0;
  height: 50px;
  background: #292828;
  font-size: 14px;
  color: #999999;
  border: none;
  text-align: center;
}
// 表格最外边框
/deep/ .el-table--border,
/deep/ .el-table--group {
  border: none;
}
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf {
  border: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
  border: none;
}
// 表格最外层边框-底部边框
/deep/ .el-table--border::after,
/deep/ .el-table--group::after {
  width: 0;
}
.customer-table::before {
  width: 0;
}
/deep/ .customer-table .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  width: 0;
}
// 表格有滚动时表格头边框
/deep/ .el-table--border th.gutter:last-of-type {
  border: none;
}
/deep/ .el-table td,
/deep/ .el-table th.is-leaf {
  border: none;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #1a1919 !important;
}
/deep/ .el-table__empty-text {
  width: 100%;
  background: #292828;
}
.el-icon-add {
  background: url('../assets/add.png') center no-repeat;
  background-size: cover;
  margin-right: 6px;
}
.el-icon-add:before {
  content: '\66ff';
  font-size: 16px;
  visibility: hidden;
}
.el-icon-add {
  font-size: 16px;
}
.el-icon-add:before {
  content: '\e641';
}
/* 弹出层设置背景色  头部 */
/deep/ .el-dialog  {
  background: #0b4053;
  border: 1px solid #3acaff;
  border-radius: 10px;
  font-size: 16px;
  color: #ffffff;
}
/deep/ .el-dialog__title  {
  font-size: 16px;
  color: #ffffff;
}
/deep/ .el-dialog__header  {
  background: #0b4053;
  border-radius: 10px;
  font-size: 8px;
  color: #ffffff;
}
/* 弹出层设置背景色 底部*/
/deep/ .el-dialog__footer  {
  background-color: #0b4053 !important;
  border-radius: 10px;
}
/deep/ .el-dialog__body  {
  padding-top: 10px;
  padding-bottom: 10px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #ffffff;
}
.el-form-item {
  margin-bottom: 10px;
}

.el-input /deep/ .el-input__inner {
  font-size: 14px;
  color: #ffffff;
  background: #0e475b;
  border: 1px solid #328dad;
  border-radius: 3px;
  height: 42px;
}
.el-input.is-disabled /deep/ .el-input__inner {
  font-size: 14px;
  color: #ffffff;
  background: #0e475b;
  border: 1px solid #328dad;
  border-radius: 3px;
}
.el-input /deep/ input::-webkit-input-placeholder {
  font-size: 14px;
  color: #5596ad;
}
.el-input /deep/ input:-moz-placeholder {
  font-size: 14px;
  color: #5596ad;
}
.el-input /deep/ input:-ms-input-placeholder {
  font-size: 14px;
  color: #5596ad;
}
.el-input /deep/ .el-input__inner:hover {
  border: 1px solid #328dad;
}
.el-input /deep/ .el-input__inner:focus {
  border: 1px solid #328dad;
}
.el-select /deep/ .el-input__inner {
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  background: #0e475b;
  border: 1px solid #328dad;
  border-radius: 3px;
  height: 42px;
}
.el-select /deep/ .el-input__inner:hover {
  border: 1px solid #328dad;
}
.el-select /deep/ .el-input__inner:focus {
  border: 1px solid #328dad;
}

.dialogButton /deep/ {
  width: 80px;
  height: 36px;
  font-size: 14px;
  border-radius: 3px;
  background: #1db9f3;
  border: none;
  padding: 0;
  color: #fff;
  margin-top: 20px;
}
.dialogButton:focus,
.dialogButton:hover {
  background: #3acaff;
  border: none;
  color: #fff;
  outline: none;
}
</style>
